<template>
  <el-drawer
    v-model="drawerVisible"
    :size="650"
    :title="title"
    @closed="$emit('closed')"
    append-to-body
  >
    <el-container v-loading="saveLoading">
      <el-main>
        <el-form
          :model="form"
          :rules="rules"
          ref="saveForm"
          label-width="120px"
        >
          <el-form-item label="上级分类" prop="parentType">
            <hh-cascader
              v-model="form.parentType"
              :apiObj="this.$API.dictType.treeData"
              label="dtName"
              value="dtType"
              children="childList"
              parents="parentTypes"
              checkStrictly="true"
              :ifTree="true"
              :disabledCode="form.dtType"
              :ifGet="false"
              clearable
            ></hh-cascader>
          </el-form-item>
          <el-form-item label="字典名称" prop="dtName">
            <el-input
              v-model="form.dtName"
              placeholder="请输入字典名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="字典类型" prop="dtType">
            <el-input
              v-model="form.dtType"
              placeholder="请输入字典类型"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="orderNum">
            <el-input-number
              v-model="form.orderNum"
              type="number"
              placeholder=""
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="字典状态" prop="status">
            <hh-dict
              v-model="form.status"
              dictType="status"
              placeholder="请选择状态"
              clearable
              filterable
            ></hh-dict>
          </el-form-item>
          <el-form-item label="备注信息" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              maxlength="200"
              placeholder=""
              clearable
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <div class="form-footer">
          <el-button type="" @click="close">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<script>
export default {
  name: "dictType-save",
  props: {
    title: {
      type: String,
      default: "新增",
    },
  },
  data() {
    return {
      saveLoading: false,
      drawerVisible: false,
      drawerTitle: "添加",
      tip: "提交成功",
      mode: "add",
      titleMap: {
        add: "新增字典类型",
        edit: "编辑数据类型",
      },
      form: {
        dtName: "",
        dtType: "",
        orderNum: 30,
        parentType: 0,
        parentTypes: "",
        status: "",
        sysDict: 1,
        remarks: "",
      },
      rules: {
        dtName: [{ required: true, message: "请输入字典名称" }],
        dtType: [
          { required: true, message: "请输入字典类型" },
          { min: 0, max: 50, message: "长度必须介于 0 和 50 之间" },
        ],
        status: [{ required: true, message: "请输入字典状态" }],
        orderNum: [
          {
            validator: (rule, value, callback) => {
              if (value < 0) callback(new Error("请输入不小于0的整数"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        remarks: [{ min: 0, max: 200, message: "请勿超过200字" }],
      },
    };
  },
  watch: {
    "form.parentType"(val) {
      if (val == null) {
        this.form.parentType = 0;
      }
    },
  },
  mounted() {},
  methods: {
    //打开
    open(mode = "add") {
      this.mode = mode;
      this.drawerVisible = true;
      return this;
    },
    //修改
    async edit(id) {
      this.tip = "修改成功";
      this.drawerVisible = true;
      this.saveLoading = true;
      let params = { id: id };
      let res = await this.$API.dictType.details.get(params);
      if (res.code == 0) {
        this.form = res.data;
        // this.$emit('success', this.form, this.mode)
        this.saveLoading = false;
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //提交
    submit() {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$API.dictType.save.post(this.form);
          if (res.code == 0) {
            this.$message.success(this.tip);
            //调用父类刷新
            this.$emit("onRefreshDictType");
            this.drawerVisible = false;
          } else {
            let errdata = this.$TOOL.response(res);
            this.$alert(
              this.$TOOL.json.get("", errdata, "message"),
              this.$TOOL.json.get("", errdata, "title"),
              {
                type: "error",
                confirmButtonText: "确定",
                dangerouslyUseHTMLString: true,
                showCancelButton: false,
              }
            );
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
  },
};
</script>
